<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册中心</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style>
        /* track base Css */
        .container {
            padding-top: 5px;
            margin-top: 5px;
            background-color: #ffffff;
        }
        .body{
            background-color: #E9EAEB;
            background-repeat: no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }
    </style>
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/css/resetpw/base.css" />
    <link rel="stylesheet" href="/css/resetpw/layout.css"/>
    <link rel="stylesheet" href="/css/layui.css">
    <link rel="stylesheet" href="/css/zoomify.min.css">
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/summernote/summernote.css">
    <link rel="stylesheet" href="/css/plugins/summernote/summernote-0.8.8.css">
    <link rel="stylesheet" href="/css/awesome-bootstrap-checkbox.css">
    <link rel="stylesheet" href="/css/build.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script src="/js/plugins/layer/layer.js"></script>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/js/zoomify.min.js"></script>
    <style>
        .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
    </style>
</head>
<body class="body">
<div th:include="include::frontheader">
</div>
<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <form action="/register" method="post" id="registerForm">

            <div class="form-group has-feedback">
                <label for="username">账号</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input data-placement="check"  id="username" class="form-control" name="username" placeholder="请输入账号" maxlength="20" type="text">
                </div>

                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" data-id="username" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="password">密码</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input data-placement="check"  id="password" name="password" class="form-control" placeholder="请输入密码" maxlength="20" type="password">
                </div>

                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" data-id="password" class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>

            <div class="form-group has-feedback">
                <label for="passwordConfirm">确认密码</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                    <input data-placement="check"  id="passwordConfirm" class="form-control" placeholder="请再次输入密码" maxlength="20" type="password">
                </div>
                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" data-id="passwordConfirm" class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" data-id="passwordConfirm" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="name">法人姓名</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input data-placement="check"  id="name" name="name" class="form-control" placeholder="请输入法人姓名" maxlength="50" type="text">
                </div>
                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="proxyName">代理注册人姓名</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input id="proxyName" name="proxyName" class="form-control" placeholder="请输入代理注册人姓名" maxlength="50" type="text">
                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="mobile">手机</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
                    <input data-placement="check"  id="mobile" name="mobile" class="form-control" placeholder="请输入手机" maxlength="50" type="text">
                </div>
                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="email">邮箱</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                    <input data-placement="check"  id="email" name="email" class="form-control" placeholder="请输入邮箱" maxlength="50" type="text">
                </div>

                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="qq">qq</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-send"></span></span>
                    <input id="qq" name="qq" class="form-control" placeholder="请输入qq" maxlength="50" type="text">
                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="wechat">微信</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-send"></span></span>
                    <input id="wechat" name="wechat" class="form-control" placeholder="请输入微信" maxlength="50" type="text">
                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="company">企业名称</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-bookmark"></span></span>
                    <input data-placement="check"  id="company" name="company" class="form-control" placeholder="请输入企业名称" maxlength="50" type="text">
                </div>

                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label for="companyCode">企业统一代码</label>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-bookmark"></span></span>
                    <input data-placement="check"  id="companyCode" name="companyCode" class="form-control" placeholder="请输入企业统一代码" maxlength="50" type="text">
                </div>

                <span  style="color:red;display: none;" class="tips"></span>
                <span  style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="row form-group">
                <div class="col-xs-7">
                    <div class="form-group has-feedback">
                        <label for="idcode-btn">验证码</label>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
                            <input data-placement="check"  id="idcode-btn" class="form-control" placeholder="请输入验证码" maxlength="4" type="text">
                        </div>
                        <span  style="color:red;display: none;" class="tips"></span>
                        <span  style="display: none;" data-id="idcode-btn" class="glyphicon glyphicon-remove form-control-feedback"></span>
                        <span  style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                    </div>
                </div>
                <div class="col-xs-5" style="padding-top: 20px">
                    <div class="form-group has-feedback">
                        <img id="vcode" src="/generate/valicode?bizCode=register">
                    </div>
                </div>
            </div>
            <div class="form-group has-feedback">
                <label>性别</label>
                <div class="input-group">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="sex" id="sex1" checked value="1"><label for="sex1">男</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="sex" id="sex2" value="2"><label for="sex2">女</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="sex" id="sex3" value="3"><label for="sex3">保密</label>
                    </div>
                </div>
                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label>会员类型</label>
                <div class="input-group">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="memberType" id="member1"   value="1"><label for="member1">买家</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="memberType" id="member2"  value="2"><label for="member2">卖家</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" name="memberType" id="member3" checked value="3"><label for="member3">买家和卖家</label>
                    </div>
                </div>
                <span style="color:red;display: none;" class="tips"></span>
                <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>头像</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button" id="oneUpload" data-id="">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img">
                    </div>
                    <input name="picId" id="fileId" type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>营业执照</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button"  data-id="1">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img1">
                    </div>
                    <input name="picId1" id="fileId1"  type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>法人身份证正面</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button"  data-id="2">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img2">
                    </div>
                    <input name="picId2" id="fileId2"  type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>法人身份证反面</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button"  data-id="3">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img3">
                    </div>
                    <input name="picId3" id="fileId3"    type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>代理人身份证正面</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button"  data-id="4">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img4">
                    </div>
                    <input name="picId4" id="fileId4"    type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>代理人身份证反面</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button" data-id="5">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img5">
                    </div>
                    <input name="picId5" id="fileId5"   type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>
            <div class="row form-group">
                <div class="col-xs-12">
                    <label>法人授权书</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button"  data-id="6">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img6">
                    </div>
                    <input name="picId6" id="fileId6"    type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-xs-12">
                    <label>协议书</label>
                    <div class="input-group">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-camera"></span></span>
                        <button class="layui-upload-drag" type="button" data-id="7">
                            <i class="fa fa-cloud"></i>上传文件上传图片
                            <p>点击上传，或将文件拖拽到此处</p>
                        </button>
                    </div>
                    <div class="layui-upload-list">
                        预览图：
                        <img class="layui-upload-img" id="img7">
                    </div>
                    <input name="picId7" id="fileId7"    type="hidden">
                    <span style="color:red;display: none;" class="tips"></span>
                    <span style="display: none;" class=" glyphicon glyphicon-remove form-control-feedback"></span>
                    <span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>
            </div>

            <div class="form-group">
                <input class="form-control btn btn-primary" id="submit" value="立即注册" type="button">
            </div>

            <div class="form-group">
                <input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
            </div>
        </form>
    </div>
</div>

<script>
    $("#vcode").click(function (e) {
        $(this).attr("src","/generate/valicode?bizCode=register&"+new Date().getTime())
    })

    var regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}$/;
    var regPasswordSpecial = /[~!@#%&=;':",./<>_\}\]\-\$\(\)\*\+\.\[\?\\\^\{\|]/;
    var regPasswordAlpha = /[a-zA-Z]/;
    var regPasswordNum = /[0-9]/;
    var password;

    var check = [false, false, false, false, false, false,false,false,false];

    function isEmail(mail) {
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (filter.test(mail)) {
            return true;
        } else {
            return false;
        }
    }
    //校验成功函数
    function success(Obj, counter) {
        Obj.parent().parent().removeClass('has-error').addClass('has-success');
        $('.tips').eq(counter).hide();
        $('.glyphicon-ok').eq(counter).show();
        $('.glyphicon-remove').eq(counter).hide();
        check[counter] = true;

    }

    // 校验失败函数
    function fail(Obj, counter, msg) {
        Obj.parent().parent().removeClass('has-success').addClass('has-error');
        $('.glyphicon-remove').eq(counter).show();
        $('.glyphicon-ok').eq(counter).hide();
        $('.tips').eq(counter).text(msg).show();
        check[counter] = false;
    }

    // 用户名匹配
    $('.container').find('input[data-placement="check"]').eq(0).change(function() {
        if (regUsername.test($(this).val())) {
            if(!checkUsernameExist($(this).val())){
                success($(this), 0);
            }else {
                fail($(this), 0, '账号已存在');
            }
        } else if ($(this).val().length < 5) {
            fail($(this), 0, '账号太短，不能少于5个字符');
        } else {
            fail($(this), 0, '账号只能为英文数字和下划线,且不能以数字开头')
        }

    });
    //检查用户账号是否已存在
    function checkUsernameExist(username) {
        var flag = false;
        $.ajax({
            url: '/front/checkUsername',
            type: 'post',
            data: {username:username},
            dataType: 'json',
            success: function (res) {
                if(res.code==0){
                    flag = true;
                }
            },
            error: function () {
                layer.msg("系统错误")
            },
            async:false
        })
        return flag;
    }


    // 密码匹配

    // 匹配字母、数字、特殊字符至少两种的函数
    function atLeastTwo(password) {
        var a = regPasswordSpecial.test(password) ? 1 : 0;
        var b = regPasswordAlpha.test(password) ? 1 : 0;
        var c = regPasswordNum.test(password) ? 1 : 0;
        return a + b + c;

    }

    $('.container').find('input[data-placement="check"]').eq(1).change(function() {

        password = $(this).val();

        if ($(this).val().length < 8) {
            fail($(this), 1, '密码太短，不能少于8个字符');
        } else {


            if (atLeastTwo($(this).val()) < 2) {
                fail($(this), 1, '密码中至少包含字母、数字、特殊字符的两种')
            } else {
                success($(this), 1);
            }
        }
    });


    // 再次输入密码校验
    $('.container').find('input[data-placement="check"]').eq(2).change(function() {

        if ($(this).val() == password) {
            success($(this), 2);
        } else {

            fail($(this), 2, '两次输入的密码不一致');
        }

    });


    //姓名
    $('.container').find('input[data-placement="check"]').eq(3).change(function() {

        if ($(this).val().trim() != '') {
            success($(this), 3);
        } else {

            fail($(this), 3, '法人姓名不能为空');
        }

    });
    // 手机号码
    var regPhoneNum = /^[0-9]{11}$/
    $('.container').find('input[data-placement="check"]').eq(4).change(function() {
        if (regPhoneNum.test($(this).val())) {
            success($(this), 4);
        } else {
            fail($(this), 4, '手机号码只能为11位数字');
        }
    });

    // 邮箱
    $('.container').find('input[data-placement="check"]').eq(5).change(function() {

        if (isEmail($(this).val())) {
            success($(this), 5);
        } else {
            fail($(this), 5, '邮箱格式错误');
        }

    });
    // 企业名称
    $('.container').find('input[data-placement="check"]').eq(6).change(function() {

        if ($(this).val()!='') {
            success($(this), 6);
        } else {
            fail($(this), 6, '企业名称不能为空');
        }

    });
    // 企业名称
    $('.container').find('input[data-placement="check"]').eq(7).change(function() {

        if ($(this).val()!='') {
            success($(this), 7);
        } else {
            fail($(this), 7, '企业统一编码不能为空');
        }

    });
    // 验证码
    // $.idcode.setCode();

    $('.container').find('input[data-placement="check"]').eq(8).change(function() {
        if ($(this).val().trim()==''){
            fail($(this), 8, '验证码不能为空');
            return;
        }
        var valicode='';
        $.ajax({
            url: '/front/getValicode',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                if(res.code==0){
                    valicode = res.data;
                }else {
                    layer.msg(res.msg)
                }
            },
            error: function () {
                layer.msg("验证码验证失败")
            },
            async:false
        })
        if ($(this).val().toUpperCase() == valicode.toUpperCase()) {
            success($(this), 8);
        } else {
            fail($(this), 8, '验证码输入错误');
        }
    });



    $('#submit').click(function(e) {
        $(this).removeClass('btn-primary').addClass('disabled');
        $(this).val('提交中...');
        var flag = check.every(function(value) {//检查所有的是否都是true
            return value == true
        })
        if (!flag) {
            e.preventDefault();
            $(this).removeClass('disabled').addClass('btn-primary').val("立即注册");
            for (key in check) {
                if (!check[key]) {
                    flag = false;
                    $('.container').find('input[data-placement="check"]').eq(key).parent().parent().removeClass('has-success').addClass('has-error')
                }
            }
        }else {
            var index = layer.load();
            $.ajax({
                url: '/register',
                type: 'post',
                data: $("#registerForm").serialize(),
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if(res.code==0){
                        layer.msg("注册成功")
                        $("#submit").val('注册成功');
                    }else {
                        layer.msg(res.msg)
                        $("#submit").removeClass('disabled').addClass('btn-primary').val("立即注册");
                    }
                    layer.close(index);
                },
                error: function () {
                    layer.close(index);
                    layer.msg("注册失败")
                    $("#submit").removeClass('disabled').addClass('btn-primary').val("立即注册");
                },
                async:true
            })
        }
    });

    $('#reset').click(function() {
        $("#submit").removeClass('disabled').addClass('btn-primary').val("提交注册");
        $('input[data-placement="check"]').slice(0, 9).parent().parent().removeClass('has-error has-success');
        $('.tips').hide();
        $('input[type="hidden"]').val('');
        $('input[type="hidden"]').val('');
        $('.has-clear').empty();
        $('.glyphicon-ok').hide();
        $('.glyphicon-remove').hide();
        check = [false, false, false, false, false, false,false,false,false ];
    });

    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '.layui-upload-drag', //绑定元素
            url: '/common/sysFile/upload', //上传接口
            method: 'post',
            data: {id: 'xxx'},//额外参数
            accept: 'images',//指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            auto: true,//是否自动提交
            exts: 'jpg|png|gif|bmp|jpeg',//扩展名
            // bindAction: '#tj1',//绑定提交地址
            field: 'file',//提交的文件name
            size: 10000,//文件大小
            number: 1,//同时上传文件数
            drag: true,//是否允许拖拽
            multiple: false,
            before: function(){
                console.log('before ....')
                layer.load();
            },
            done: function(res, index, upload){
                //上传完毕回调
                var item = this.item;
                layer.closeAll('loading'); //关闭loading
                if (res.code==0) {
                    $("#img"+item.attr("data-id")).addClass("zoomify img-thumbnail")
                    $("#img"+item.attr("data-id")).attr('src', res.data.url)
                    // $("#fileId"+item.attr("data-id")).val(res.data.fileId)
                    // var html_="<img class='zoomify img-thumbnail' height='80px'  src='"+res.data.url+"' />"
                    // $("#picture"+item.attr("data-id")).empty()
                    // $("#picture"+item.attr("data-id")).append(html_)
                    $('.zoomify').zoomify();
                }else {
                    layer.alert(res.msg, {icon: 2})
                }

            },
            error: function(index, upload){
                console.log('error ....')
                layer.closeAll('loading'); //关闭loading
                layer.alert("上传错误", {icon: 2})
                //请求异常回调
            }
        });
    });

</script>
</body>
</html>
